<template>
	<!-- 检索卡片 -->
	<view class="card-flex-box" v-if="!isDataCached">
		<view class="cue-card" v-if="cardVisible">
			<view class="warning-image">
				<img src="../img/warning.png" style="width: 64px;height: 64px;" />
			</view>
			<view class="text">
				<view>因为此功能会在短时间内占用大量服务器资源</view>
				<view>所以限制每个用户每日的检索次数，敬请谅解</view>
				<view style="color:rgb(250, 173, 20);">今日剩余检索次数：2次</view>
			</view>
			<fui-button @click="handleClick" :disabled="isSearching" :loading="isSearching" size=30
				style="margin-top: 6px;width: 225px; ">
				{{ isSearching ? `正在检索${processedCount}/${props.openshops.length}家门店` : '检索' }}
			</fui-button>
		</view>
	</view>

	<!-- 检索结果和提示语 -->
	<view class="found-message1">{{foundMessage}}</view>
	<view class="found-message2" v-if="!cardVisible">
		<view v-if="newOpenShops.length">
			<view>实际情况可在“喜茶GO”官方小程序内选择对应门店核实</view>
			<view>查询结果会在当日24点前保留</view>
		</view>
		<view v-else>可尝试对其他城市进行检索</view>
	</view>
	<view class="shoplist" v-if="!cardVisible">
		<ShopList v-if="newOpenShops.length" :list="newOpenShops" />
	</view>

</template>

<script setup>
	import {
		ref
	} from 'vue';
	import {
		onShow,
		onLoad
	} from '@dcloudio/uni-app';
	import {
		getShopBannerAPI,
		postShopMenuAPI,
		postOverseasShopMenuAPI
	} from '../../../api/shop';
	import ShopList from './ShopList.vue';
	import {
		defineProps,
		defineExpose,
		onMounted
	} from 'vue';

	const props = defineProps({
		openshops: {
			type: Array,
			required: true
		},
		cityname: {
			type: String,
			required: true
		},
	});

	//控制按钮显示
	const cardVisible = ref(true);
	// 搜索后的提示信息
	const foundMessage = ref('')
	// 存储符合条件的店铺
	const newOpenShops = ref([]);
	// 存储已处理的店铺数
	const processedCount = ref(0);
	//控制按钮文本
	const isSearching = ref(false);
	// 检查是否有缓存数据
	const isDataCached = ref(false);

	// 响应式变量来存储目标标题
	// const targetTitle1 = ref('');
	// const targetTitle2 = ref('');
	// const targetTitle3 = ref('');

	const handleClick = async () => {
		isSearching.value = true;
		await searchNewOpenShop();
		cardVisible.value = false;
		cacheSearchData(); // 缓存搜索数据
		console.log(newOpenShops.value)
	}

	const cacheSearchData = () => {
		const data = {
			newOpenShops: newOpenShops.value,
			foundMessage: foundMessage.value,
			timestamp: new Date().getTime()
		};
		uni.setStorageSync(props.cityname, data);
	};

	const checkCache = () => {
		console.log('checkCache!')
		const cachedData = uni.getStorageSync(props.cityname);
		if (cachedData) {
			const now = new Date().getTime();
			const diff = now - cachedData.timestamp;
			const oneDay = 24 * 60 * 60 * 1000;
			if (diff < oneDay) {
				newOpenShops.value = cachedData.newOpenShops;
				foundMessage.value = cachedData.foundMessage;
				cardVisible.value = false;
				isDataCached.value = true;
			} else {
				uni.removeStorageSync(props.cityname);
			}
		}
	};

	onShow(() => {
		// checkCache();
		console.log('onshow!')
	});

	onMounted(() => {
		console.log('onMounted!')
		checkCache();
	});


	//每组请求之间添加延迟
	const sleep = (ms) => new Promise(resolve => setTimeout(resolve, ms));

	const searchNewOpenShop = async () => {
		// getShopBannerData(shopId.value)
		const batchSize = 10; // 每次发送10个请求
		const delay = 500; // 0.5秒延迟
		for (let i = 0; i < props.openshops.length; i += batchSize) {
			const batch = props.openshops.slice(i, i + batchSize);
			const results = await Promise.all(batch.map(async (shop) => {
				const label = await checkShopForLabel(shop.id);
				return label ? {
					...shop,
					label: label.label
				} : null;
			}));
			newOpenShops.value.push(...results.filter(shop => shop !== null));
			processedCount.value += batch.length

			console.log(processedCount.value + '/' + props.openshops.length)
			// uni.showToast({
			// 	title: `检索中${processedCount.value}/${props.openshops.length}`,
			// 	duration: 1500,
			// 	icon: 'loading'
			// });

			// 添加延迟
			await sleep(delay);
		}

		// 对搜索结果进行排序
		newOpenShops.value.sort((a, b) => {
			const priority = {
				'9元喝': 1,
				'买一送一': 2,
				'第二杯半价': 3,
				'试营业88折': 4
			};
			const aPriority = priority[a.label] || 5; // 默认优先级为5（未定义的标签）,优先级数值越小，排列越靠前。
			const bPriority = priority[b.label] || 5;

			return aPriority - bPriority;
		});

		if (newOpenShops.value.length > 0) {
			foundMessage.value = `${props.cityname} 共找到${newOpenShops.value.length}家新开业&试营业门店`
			console.log(foundMessage.value)
		} else {
			foundMessage.value = '当前城市暂无新开业3天内的门店'
		}
	}

	//获取门店Banner数据
	const getShopBannerData = async (id) => {
		const res = await getShopBannerAPI(id)
		//新店大礼包字段
		const targetItem1 = res.data.shop_advertise.find(item => item.id === 7427);
		if (targetItem1) {
			targetTitle1.value = targetItem1.title;
		} else {
			targetTitle1.value = '未找到目标项';
		}
		//试营业字段
		const targetItem2 = res.data.shop_advertise.find(item => item.id === 7136);
		if (targetItem2) {
			targetTitle2.value = targetItem2.title;
		} else {
			targetTitle2.value = '未找到目标项';
		}
		//9元喝字段
		const targetItem3 = res.data.shop_advertise.find(item => item.id === 7454);
		if (targetItem3) {
			targetTitle3.value = targetItem3.title;
		} else {
			targetTitle3.value = '未找到目标项';
		}
	}

	//获取门店菜单数据 & 检查单个店铺是否有 "9元喝" 标签
	const checkShopForLabel = async (id) => {
		if (props.openshops[0].is_overseas) {
			const res = await postOverseasShopMenuAPI(id)
			return checkForLabel(res.data);
		} else {
			const res = await postShopMenuAPI(id)
			return checkForLabel(res.data);
		}
	}

	const checkForLabel = (data) => {
		//防止某些门店返回值里没有data或data.showRule（如某些公司园区的店）
		if (!data || !data.showRule) {
			return null;
		}
		const showRule = data.showRule;
		for (const key in showRule) {
			if (showRule.hasOwnProperty(key)) {
				const ruleArray = showRule[key];
				for (const rule of ruleArray) {
					// rule.productLabel === '9元喝 | 限1件'
					if (rule.label === '9元喝') {
						return {
							label: '9元喝'
						};
					} else if (rule.label === '买一送一') {
						return {
							label: '买一送一'
						};
					} else if (rule.label === '第二杯半价') {
						return {
							label: '第二杯半价'
						};
					} else if (rule.label === '试营业88折') {
						return {
							label: '试营业88折'
						};
					}

				}
			}
		}
		return null;
	};
</script>

<style lang="scss">
	.card-flex-box {
		display: flex;
		justify-content: center;

		.cue-card {
			width: 85%;
			height: 230px;
			background-color: white;
			margin-top: 30px;
			border-radius: 15px;

			display: flex;
			flex-direction: column;
			justify-content: center;
			align-items: center;

			.warning-image {
				width: 64px;
				height: 64px;
			}

			.text {
				font-size: 14px;

				margin: 10px 0;

			}
		}
	}


	.found-message1 {
		text-align: center;
		margin-top: 14px;
		font-size: 13px;
		color: gray;
	}

	.found-message2 {
		text-align: center;
		margin-top: 4px;
		font-size: 13px;
		color: gray;
	}
</style>